<template>
  <div class="swper">
    <h2>轮播图管理页面</h2>

    <el-button @click="dialogVisible = true">新增</el-button>

    <el-dialog v-model="dialogVisible" title="新增轮播图" width="500">
      <el-upload
        class="avatar-uploader"
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        @change="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="add"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="id" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="remove(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getSwperApi, removeSwperApi, addSwperApi } from "@/request/api";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";

const tableData = ref([]);
const getData = async () => {
  const res = await getSwperApi();
  tableData.value = res.data;
};

onMounted(() => {
  getData();
});

const remove = async (id: number) => {
  const res = await removeSwperApi({ id });
  ElMessage({
    message: res.msg,
    type: "success",
  });
  getData();
};

const dialogVisible = ref<boolean>(false);

const imageUrl = ref("");
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
  // console.log(123);
  // console.log(rawFile);

  const reader = new FileReader();
  reader.readAsDataURL(rawFile.raw);
  reader.onload = (e: any) => {
    imageUrl.value = e.target.result;
  };
  return true;
};

const add = async () => {
  const res = await addSwperApi({ url: imageUrl.value });
  ElMessage({
    message: res.msg,
    type: "success",
  });
  dialogVisible.value = false;
  getData();
};
</script>

<style lang="less" scoped>
h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
